<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>课程主页 - 在线课堂</title>
        <script src="//cdn.bootcss.com/angular.js/1.2.5/angular.js"></script>
        <script src="//cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
        <link type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
        <script src="js/Controller.js"></script>
    </head>
    <body ng-app="myApp">
        <!-- Navbar -->
        <div ng-include="'navbar.html'"></div>
        <div class="container">
            <!-- block 选择标签头 -->
            <div class="block-head" style="margin-top:70px">
                <div class="row">
                    <div class="form-group">
                        <form style="padding-right:10px">
                            <label for="courseType" class="col-md-1 col-sm-2 col-xs-2 text-muted" style="margin-top:6px;font-size:medium">学科分类</label>
                            <button type="button" class="btn btn-default" >全部</button>
                            <button type="button" class="btn btn-default" ng-click="ng-class={{ btn-danger }}">人文学科</button>
                            <button type="button" class="btn btn-default" >经济生活</button>
                            <button type="button" class="btn btn-default" >科学技术</button>
                            <button type="button" class="btn btn-default" >讲座研讨</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <form style="padding-right:10px">
                            <label for="courseType" class="col-md-1 col-sm-2 col-xs-2 text-muted" style="margin-top:6px;font-size:medium">时间分布</label>
                            <button type="button" class="btn btn-default" >全部</button>
                            <button type="button" class="btn btn-default" >正在更新</button>
                            <button type="button" class="btn btn-default" >已经结束</button>
                            <button type="button" class="btn btn-default" >即将开始</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <form style="padding-right:10px">
                            <label for="courseType" class="col-md-1 col-sm-2 col-xs-2 text-muted" style="margin-top:6px;font-size:medium">学科分类</label>
                            <button type="button" class="btn btn-default" >默认</button>
                            <button type="button" class="btn btn-default" >最新</button>
                            <button type="button" class="btn btn-default" >最热</button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- block 选择标签内容 -->
            <div class="block-body" style="margin-top:10px">
                <!-- 筛选内容提示栏 -->
                <div class="row">
                    <label for="selectCourses" class="text-success col-md-2" style="font-size:large">已筛选课程</label>
                </div>
                <!-- 内容展示 -->
                <div class="row">
                    <div class="well">
                        <div class="media">
                            <a class="pull-left" href="course.html#?course=管理心理学">
                                <img class="media-object" src="images/glxlx.jpg" alt="200x150" style="height:150px;width:255px">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">管理心理学</h4>
                                <div class="row">
                                    <span class="col-md-2">讲师：邓志才</span><span class="col-md-4 pull-right hidden-xs">已学人数：3214人</span>
                                </div>
                                <div class="row">
                                    <p class="span12" style="margin-left:15px">这个课程主要是讲智障的故事。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="well">
                        <div class="media">
                            <a class="pull-left" href="course.html#?course=身边的经济学">
                                <img class="media-object" src="images/sbdjjx.jpg" alt="200x150" style="height:150px;width:255px">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">身边的经济学</h4>
                                <div class="row">
                                    <span class="col-md-2">讲师：胡瑶瑶</span><span class="col-md-4 pull-right hidden-xs">已学人数：1244人</span>
                                </div>
                                <div class="row">
                                    <p class="span12" style="margin-left:15px">讲述与你息息相关的，无处不在的经济原理。</p>
                                </div>
                                <div class="row">
                                    <span style="margin-left:15px">评价</span><span><img src="..." alt="评价星数"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="well">
                        第三个课程
                    </div>
                    <div class="well">
                        第四个课程
                    </div>
                </div>
                <!-- 分页栏 -->
                <div class="row-fluid">
                    <div style="text-align: center">
                        <ul class="pagination ">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
